<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">车牌号</block>
		</cu-custom>
		<view class="contents">
			<view class="voucher-item" v-for="(item,index) in list" :key="index" @click="chooseCar(item)">
				<view class="flex justify-space-between align-center">
					<view class="flex align-center">
						<view class="f-16 fontBold orange">
							所属城市-{{item.city}}
						</view>
						<view class="is_default_wrap" v-if="item.is_default==1">
							默认
						</view>
					</view>
					<view class="flex align-center p-l-20 p-t-3 p-b-3" @click.stop="delCar(item)">
						<image src="/static/img/trash.png" class="icon" mode=""></image>
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-8">
					<view class="f-16 fontBold">
						{{item.car_number}}
					</view>
					<view class="flex align-center p-l-20 p-t-3 p-b-3" @click.stop="toDetail(item)">
						<image src="/static/img/edit.png" class="icon" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			暂无数据~
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex justify-space-around">
			<view class="bottom-btn bottom-btn2" @click="sub()">
				添加车牌号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				type:1,//2下单选择
			}
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type;
			}
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			sub(){
				uni.navigateTo({
					url:'/pages/mine/addCar'
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/mine/addCar?id='+item.id
				})
			},
			delCar(item){
				uni.showModal({
					title:'提示',
					content:'确认删除该车牌号吗？',
					success: (res) => {
						if(res.confirm){
							this.delCarDo(item);
						}
					}
				})
			},
			delCarDo(item){
				let data = {
					car_num_id:item.id
				}
				this.$http('/apicloud/User/delUsersCarNum',data).then(res=>{
					if(res.code == 200){
						this.$util.showToast(res.mess);
						setTimeout(()=>{
							this.getInfo();
						},1000)
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
			getInfo(){
				let data = {
					
				}
				this.$http('/apicloud/User/usersCarNum',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.list = datas;
					}
				})
			},
			chooseCar(item){
				if(this.type != 2)return;
				let obj = {
					car_num:item.car_number,
					car_id:item.id
				}
				this.$store.state.transferObj = obj;
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="less">
	.voucher-item{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding: 24rpx;
		.icon{
			width: 32rpx;
			height: 28rpx;
		}
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
	.is_default_wrap{
		width: 100rpx;
		height: 40rpx;
		background: #FECB2E;
		color: #fff;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		line-height: 40rpx;
		text-align: center;
	}
</style>
